<template>
	<view>
		<view style="display: flex;background-color: #e2e2e2;">
			<view class="input-view">
				<input confirm-type="search" class="input" type="text" placeholder="输入搜索关键词" @blur="zcSearchInput" />
				<uni-icon type="search" size="22" color="#3CA4FA" />
			</view>
		</view>
		
		<view class="zcModel-box" style="border-radius: 0;margin: 0;">
			<view class="zcModel-box-view zcAlignI_center">
				<view class="zcModel-image">
                    <view class="refresh_item" style="height: 50px;" :style="{'transform':'translateY('+groupTop1+'px)','transition':isTransfrom?'transform .3s':''}">
                        <view class="iconfont icon-shuaxin" :style="{'transform':'rotate('+ refreshIconDeg +'deg)'}"></view>
                        <view>{{refreshText}}</view>
                    </view>
					<scroll-view scroll-y class="zcPicker-model-item" 
                    @scrolltoupper="toupper" 
                    id="scroll" 
                    @touchend="zcTouchend"
                    @touchstart="zcTouchstart" 
                    @touchmove.stop="zcTouchmove" :style="{'transform':'translateY('+groupTop+'px)','transition':isTransfrom?'transform .3s':''}">
                        <radio-group
                            class="radioGroup" 
                            @change="checkboxChange"
                            >
                        	<block v-for="(item,index) in ExternalCarType" :key="index">
                        		<label class="radio">
                        			<radio :data-id="'id-'+index" :value="item.remark" :checked="value === item.remark"
                        			color="#FFFFFF" style="transform: scale(0.7);" />
                        			<view class="zcModel-item zcFlex_column">
                        				<view class="zcModel-item-content">{{item.remark+ ' ( '+item.price+' )'}}</view>
                        			</view>
                        		</label>
                        	</block>
                        </radio-group>
					</scroll-view>
				</view>
			</view>
		</view>
		<view v-if="ExternalCarType.length < 1 && isNoDataShow" class="uni-tab-bar-loading" style="text-align: center;">
			<view class="no_model">
				<image :src="imgPath+'UniImages/no_data.png'" mode="widthFix" style="width: 100%;"></image>
				<view class="no_text">暂无数据</view>
			</view>
		</view>
		<view class="zcFooter-but uni-flex">
			<button @tap="zcNextStep" >下一步</button>
		</view>
	</view>
</template>

<script>
	import uniIcon from "../../components/uni-icon/uni-icon.vue"
	
	let _this;
    let startY;
    let scrollTop;
    let time;   // 处理刷新图标动画时间
    let pageTop = 0;
    let groupIsTop = false;
    let scrollToplength = 0;  // scroll-view 到顶部的距离
    let startToplength = 0;  // scroll-view 到顶部的距离
    let isDropRefresh = false;    // 是否开启下拉刷新
    
	export default {
		components:{
			uniIcon
		},
		data() {
			return {
				value:"",
                groupTop:0, // 下拉刷新 拉离顶部距离
                groupTop1:-50, // 下拉刷新 拉离顶部距离
                refreshIconDeg:0,
                refreshText:'下拉刷新',
                isTransfrom:false,
				InsureOrderSN:'',
                loadingText:'',
                isNoDataShow:false,
                imgPath:this.$ZcPublic.Domain,
				ExternalCarType : []
			}
		},
		onLoad(e) {
			_this = this;
			if (e.InsureOrderSN) {
				let InsureOrderSN = e.InsureOrderSN;
				_this.InsureOrderSN = InsureOrderSN;
				_this.zcQueryInsureCarType4Insure(InsureOrderSN);	// 查询  保险公司 车型数据
			}
		},
        onReady() {
            uni.createSelectorQuery().select('#scroll').boundingClientRect(function (res) {
                // 获取列表初始化窗口距离顶部长度（固定值，每次初始化赋值）
                scrollToplength = res.top;
            }).exec();
        },
		methods: {
            toupper(res) {
                _this.groupTop = 0;
                _this.groupTop1 = -50;
            },
            zcTouchstart(res) {
                startY = res.touches[0].pageY;
                uni.createSelectorQuery().select('#scroll').boundingClientRect(function (res) {
                    startToplength = res.top;
                    _this.isTransfrom = false;
                    if (res.top == scrollToplength) {
                        isDropRefresh = true;
                    }else {
                        isDropRefresh = false;
                    }
                }).exec();
            },
            zcTouchend(res) {
                if (_this.groupTop > 50) {
                    _this.groupTop = 50;
                    _this.groupTop1 = 0;
                    _this.refreshText = '刷新中'
                    _this.isTransfrom = true;
                    time = setInterval(function(){
                        _this.refreshIconDeg = _this.refreshIconDeg+45;
                    },100)
                    
                    setTimeout(function() {
                        _this.zcQueryInsureCarType4Insure(_this.InsureOrderSN);	// 查询  保险公司 车型数据
                    }, 1000);
                }else if (_this.groupTop < 50) {
                    _this.groupTop = 0;
                    _this.groupTop1 = -50;
                    _this.refreshText = '下拉刷新';
                    _this.isTransfrom = true;
                }
            },
            zcTouchmove(res) {
                //  判断列表是否到顶，未到顶则不做处理
                if (!isDropRefresh) {
                    return;
                }
                scrollTop = (res.touches[0].pageY - startY)*0.5;
                if (scrollTop > 0) {
                    //  判断是否是页面初始化时就触发下拉刷新 （pageTop == 0 ：表示当前是页面初始化触发的下拉刷新）
                    if (pageTop == 0) {
                        pageTop = scrollTop;
                        groupIsTop = true;
                    }
                    _this.groupTop = scrollTop - pageTop;
                    _this.groupTop1 = _this.groupTop-50;
                    if (_this.groupTop > 50) {
                        _this.refreshText = '松开刷新'
                    }else if(_this.groupTop < 50) {
                        _this.refreshText = '下拉刷新'
                    }
                }
                
            },
			checkboxChange(res) {
				_this.value = res.detail.value;
			},
			//  ------------- 接口区 ----------------
			zcQueryInsureCarType4Insure(SN) {
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'uni_Insure_Detail',
						Action: 'Ext_QueryInsureCarType4Insure',
						Data: {
							SN:SN
						}
					},
					Callback:function(resjson,scope) {
						if (resjson.state === 'back') {
                            console.log('车型数据 -- ',resjson.data);
                            
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
                                _this.isNoDataShow = true;
								return;
							}
                            _this.ExternalCarType = [];
							if (resjson.data.length > 0) {
								_this.ExternalCarType = resjson.data;
								
								_this.zcGetInsureOrder(_this.InsureOrderSN);
							}else {
								 _this.isNoDataShow = true;
							}
						}
                        if (resjson.state === 'end') {
                            uni.hideLoading();
                            // 处理下拉刷新初始化
                            clearInterval(time);
                            _this.groupTop = 0;
                            _this.groupTop1 = -50;
                            _this.refreshText = '下拉刷新';
                        }
						
					},
					Scope: this
				})
			},
			zcGetInsureOrder(SN) {	// 获取 保单详情接口
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'uni_Insure_Detail',
						Action: 'Ext_GetInsureOrder',
						Data: {
							SN:SN
						}
					},
					Callback:function(resjson,scope) {
						if (resjson.state === 'back') {
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
								return;
							}
							
							if (resjson.data.remark) {
								_this.value = resjson.data.remark;
							}
						} else{
							
						}
						
					},
					Scope: this
				})
				
			},
			//  ------------  END ---------------
			//  下一步 操作处理函数
			zcNextStep() {
				if (!_this.value) {
					uni.showToast({
					    title: '请选择车型',
                        icon:'none'
					});
					return
				}
				
				let carType = {};
				for (let i = 0; i < _this.ExternalCarType.length; i++) {
					if (_this.value === _this.ExternalCarType[i].remark) {
						carType = _this.ExternalCarType[i];
					}
				}
				_this.$ZcPublic.Server.Post({
					IsNeedLogin: true,
					Paras: {
						Name: 'uni_Insure_Detail',
						Action: 'Ext_SaveInsureCarType4Insure',
						Data: {
							SN:_this.InsureOrderSN,
							CarType:carType	// 选中的车型数据 P_ExternalCarType
						}
					},
					Callback:function(resjson,scope) {
						if (resjson.state === 'back') {
							console.log('车型 保存成功 = ',resjson.data);
							if (!resjson.success) {
								uni.showModal({
									title:'温馨提示',
									showCancel:false,
									content:''+resjson.msg
								})
								return;
							}
						} else{
							
						}
					},
					Scope: this
				})
				
				uni.navigateTo({
					url: '../insurePrice_insureCompany/insurePrice_insureCompany?InsureOrderSN='+_this.InsureOrderSN
				});
			}
			// ------------------
		}
	}
</script>

<style>
    .zcModel-box{position: absolute;left: 0;width: 100%;height: calc(100% - 201upx);top: 120upx;}
    .zcModel-box-view,.zcModel-image{height: 100%;position: absolute;left: 0;width: 100%;overflow: hidden;}
    /* .radioGroup{} */
    .zcPicker-model-item{overflow: hidden;position: absolute;left: 0;width: 100%;height: 100%;}
    
	.zcModel-box{
		display: flex;
		background-color: #FFFFFF;
		border-radius: 20upx;
		margin: 0 20upx;
		flex-direction: column;
	}
	.zcModel-box-view{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		flex-shrink: 0;
		flex: 1;
		/* padding: 20upx; */
		/* border-bottom: 6upx solid #F4F5F6; */
		box-sizing: border-box;
	}
	.zcModel-box-view>button{
		border: 4upx solid #3ca4fa;
		color: #3ca4fa;
		font-size: 30upx;
		border-radius: 38upx;
		width: 40%;
	}
	.zcModel-box-view>.bActive{
		background-color: #3ca4fa;
		color: #FFFFFF;
	}
	.zcModel-box-item{
		display: flex;
		flex: 1;
		padding: 8upx;
		flex-shrink: 0;
	}
	.radio:first-child{border-top: 4upx solid #F5F5F5;}
	.radio{
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		border-bottom: 4upx solid #F5F5F5;
		padding: 20upx;
	}
	radio .wx-radio-input.wx-radio-input-checked{background-color: #3CA4FA!important;}
	/* 下拉刷新样式 */
    .refresh_item{display: flex;justify-content: center;align-items: center;position: absolute;width: 100%;}
	.icon-shuaxin{display: flex;align-items: center;}
    .refresh_item view:last-child{margin-left: 20upx;color: #666666;}
	/* 搜索栏样式 */
	.input-view {
		/* width: 92%; */
		display: flex;
		background-color: #FFFFFF;
		height: 72upx;
		/* border-radius: 6px; */
		/* padding: 0 4%; */
		flex-wrap: nowrap;
		margin: 24upx;
		line-height: 72upx;
		flex: 1;
		padding-right: 16upx;
	}
	
	.input-view .uni-icon {
		line-height: 30px !important;
	}
	
	.input-view .input {
		height: 72upx;
		line-height: 72upx;
		/* width: 94%; */
		padding: 0 3%;
		flex: 1;
	}
	
	
	/* 底部按钮样式 -- 区域 */
	.zcFooter-but{position: fixed;bottom: 0;left: 0;width: 100%;z-index: 10;background-color: #F4F5F6!important;}
	.zcFooter-but button:first-child{flex: 1;border: 2upx solid #3CA4FA;color: #3CA4FA;border-radius: 0;font-size: 32upx;}
	.zcFooter-but button:last-child{flex: 1;background-color: rgba(60, 164, 250, 1);color: #FFFFFF;border-radius: 0;font-size: 32upx;}
	.zcFooter-but .button-hover:last-child{color: rgba(250, 250, 250, 0.6);background-color: rgba(60, 164, 250, 0.6)!important;}
	
	/* 分页底部说明样式 */
	.uni-tab-bar-loading{text-align: center;margin: 0;}
	
	/* 无数据样式 */
	.no_model{position: relative;display: flex;flex-direction: column;align-items: center;padding: 0 160upx;padding-top: 100upx;}
	.no_text{font-size: 30upx;color: #999999;position: absolute;bottom: 28upx;}
</style>
